<template>
	<view class="post">
		<view class="text">发布运动</view>
		<view class="main">
			<view class="form">
				<view style="margin-top:10px;">运动类型:</view>
				<input class="uni-input" @input="onKeyInput" placeholder="请输入类型" />
			</view>
			<view class="form">
				<view style="margin-top:10px;">运动时间:</view>
				<view class="example-body">
					<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
				</view>

			</view>
			<view class="form">
				<view style="margin-top:10px;">运动地点:</view>
				<input class="uni-input" @input="onKeyInput2" placeholder="请输入地点" />
			</view>
			<view class="form">
				<view style="margin-top:10px;">人员要求:</view>
				<view class="uni-list-cell-db">
					<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
				</view>
				<view class="uni-list-cell-db">

					<uni-data-select v-model="value2" :localdata="range2" @change="change2"></uni-data-select>
				</view>
			</view>
			<view class="form">
				<view style="margin-top:10px;">更多要求:</view>
				<textarea class="uni-input textarea" placeholder="请输入内容" v-model="post.more"></textarea>
			</view>
             <view class="final" @click="gettestpost(post)">发布</view>
		</view>
	</view>
</template>

<script>
	import {testpost } from '@/api/login'
	export default {
		
		data() {

			return {
				post:{
					type:"",
					time:"",
					place:"",
					sex:"",
					number:1,
					more:"",
				},
				value: 0,
				range: [{
						value: 0,
						text: "女生"
					},
					{
						value: 1,
						text: "男生"
					},
					{
						value: 2,
						text: "女生，男生"
					},
				],
				value2: 0,
				range2: [{
						value: 0,
						text: 1
					},
					{
						value: 1,
						text: 2
					},
					{
						value: 2,
						text: 3
					},
					{
						value: 3,
						text: 4
					},
					{
						value: 4,
						text: 5
					},
					// {
					// 	value: 5,
					// 	text: "5~10人"
					// },
					
				],
				datetimesingle: '',

			};
		},
		created() {

		},
		watch: {
			datetimesingle(newval) {
				console.log('单选:', this.datetimesingle);
			},

		},
		mounted() {
			setTimeout(() => {
				this.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000
				this.single = '2021-2-12'
				this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"]
			}, 3000)
		},
		methods: {
			change(e) {
			        console.log("e:", e);
			        // 假设 range 数组中的 text 字段是你要存储的实际性别值
			        const selectedSex = this.range[e].text;
			        this.post.sex = selectedSex;
			        console.log('Selected Sex:', this.post.sex);
			    },
			change2(e) {
				console.log("e:", e);
				const selectedNum = this.range2[e].text;
				this.post.number = selectedNum;
				console.log('Selected Num:', this.post.number);
			},
			changeLog(e) {
				console.log('change事件:', e);
				this.post.time=this.datetimesingle;
				console.log(this.post.time,"时间")
			},
			 onKeyInput(event) {
			      // event.target.value 是输入框当前的值
			      this.post.type = event.target.value;
			      console.log('输入的内容:',  this.post.type);
			    },
				onKeyInput2(event) {
				     // event.target.value 是输入框当前的值
				     this.post.place = event.target.value;
				     console.log('输入的内容:',  this.post.place);
				   },
				   gettestpost(a){
				   	testpost(a).then(res=>{
				   		console.log(res)
				   	})
				   },

		}
	};
</script>
<style lang="scss">
	.example-body {

		width: 280px;
		height: 40px;
		// border: #d0e6ff solid 1.5px;
		border-radius: 10px;
		// background-color: #55aaff;
		line-height: 40px;
		margin-left: -10px;
		padding-left: 20px;
	}

	.post {
		width: 390px;
		height: 700px;
		background-image: linear-gradient(105deg, #fff, #d0e6ff, #6cc0ff, #55aaff);
		color: #000;

		.main {
			width: 390px;
			height: 700px;
			background-color: #fff;
			margin-top: 120px;
			border-radius: 30px;
			padding-top: 5px;

			.form {
				display: flex;
				margin: 40px 10px;

				.uni-input {
					width: 260px;
					height: 40px;
					border: #b4bbc4 solid 0.1px;
					border-radius: 10px;
					// background-color: #55aaff;
					line-height: 40px;
					margin-left: 10px;
					padding-left: 20px;
				}

				.select {
					width: 100px;
				}

				.textarea {
					height: 150px;
					margin-top: 5px;
					padding-top: 10px;
				}
			}
		}

		.text {
			width: 100px;
			height: 0px;
			margin: auto;
			background-color: #fff;
			text-align: center;
			line-height: 100px;
			font-size: 25px;
			font-weight: 600;
		}
	}

	.uni-list-cell-db {
		width: 120px;
		margin-left: 10px;
	}
	
	.final{
		width:370px;
		height:50px;
		background-color: #55aaff;
		margin:-20px auto;
		border-radius: 15px;
		text-align:center;
		line-height: 50px;
		color:#fff;
		
	}
</style>